<script setup>
import useLoginStore from '@/store/user/index.js'
import { useRoute } from 'vue-router'
import router from '@/router/index.js'
import { activeRouter } from '@/utils/addRoute.js'
import { computed } from 'vue'

defineProps({
  isFold: {
    type: Boolean,
    default: true
  }
})

const loginStore = useLoginStore()

//菜单路由跳转
const changePageInfo = (path) => {
  router.push(path)
}

//找到激活的路由
//获取当前选择的路由信息
const route = useRoute()

const activeMenuId = computed(() => {
  return activeRouter(route.path, loginStore.menus)
})
</script>

<template>
  <div class="side-bar">
    <div class="top">
      <img src="@/assets/images/logo.png" />
      <span v-show="isFold" class="title">后台管理系统</span>
    </div>
    <el-menu
      active-text-color="rgb(64, 158, 255)"
      background-color="rgb(48, 65, 86)"
      class="el-menu-vertical-demo"
      :default-active="activeMenuId"
      text-color="#fff"
    >
      <!--      所有用户都可以访问的主菜单-->
      <el-menu-item @click="changePageInfo('/main/home')">
        <template #title>
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span class="menuTitle">首页</span>
        </template>
      </el-menu-item>

      <template v-for="(item, index) in loginStore.menus" :key="item.menuId">
        <el-sub-menu :index="item.menuId + ''">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span class="menuTitle">{{ item.menuName }}</span>
          </template>
          <!--          遍历子菜单-->
          <template
            v-for="(itemChildren, indexChildren) in item.children"
            :key="itemChildren.menuId"
          >
            <el-menu-item
              :index="itemChildren.menuId + ''"
              @click="changePageInfo(itemChildren.component)"
              >{{ itemChildren.menuName }}
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<style scoped lang="less">
.side-bar {
  height: 100vh;
  overflow-y: hidden;

  .el-menu {
    margin-left: -10px;

    .menuTitle {
      margin-left: 10px;
    }
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(48, 65, 86);

    img {
      margin-right: 5px;
      width: 32px;
      height: 32px;
    }

    .title {
      padding: 15px 0;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
    }
  }

  .el-menu {
    height: 100%;
  }
}
</style>
